<template>
  <view class="container">
    <view class="search">
      <view class="search_left">
        <image src="/static/image/sousuo.png" mode=""></image>
        个人提升
      </view>
      <image src="/static/image/maikefeng.png" mode=""></image>
    </view>
    <view class="swiper_box">
      <uv-swiper :list="swiperList" previousMargin="30" height="150" nextMargin="30" circular :autoplay="false"
        radius="5" bgColor="#ffffff">
      </uv-swiper>
    </view>
    <view class="nav">
      <view class="nav_content" v-for="(item, index) in navList" :key="index">
        <image :src="item.img"></image>
        <view>{{item.name}}</view>
      </view>
    </view>
    <view class="coupon">
      <view class="coupon_head">
        <view class="coupon_head_left">
          <image src="/static/image/youhuiquan.png" mode=""></image>
          优惠券
        </view>
        <view class="coupon_head_right">
          查看更多
          <uv-icon name="arrow-right" color="#999999" size="14"></uv-icon>
        </view>
      </view>
      <scroll-view scroll-x="true" class="coupon_main">
        <view class="coupon_main_box" v-for="(item,index) in couponList" :key="index">
          <image class="coupon_box_bg" src="/static/image/youhuiquanbg.png" mode=""></image>
          <view class="coupon_box_content">
            <text>
              优惠额度
            </text>
            <view class="coupon_box_center">
              <view><text>￥</text>1000</view>
              <text>满200元可用</text>
            </view>
            <image class="coupon_box_btn" src="/static/image/lijilingqu.png" mode=""></image>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="lesson">
      <view class="lesson_head">
        <view class="lesson_head_left">
          <image src="/static/image/zuixing.png" mode=""></image>
          新课上架
        </view>
        <view class="lesson_head_right">
          查看更多
          <uv-icon name="arrow-right" color="#999999" size="14"></uv-icon>
        </view>
      </view>
      <view class="lesson_main">
        <view class="lesson_main_box" v-for="(item,index) in lessonList" :key="index" @tap="gotoDetail(item)">
          <view class="lesson_main_box_left">
            <image :src="item.image" mode=""></image>
            <view>
              <image
                :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
                mode=""></image>
              <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
            </view>
          </view>
          <view class="lesson_main_box_content">
            <view class="lesson_content_head ellipsis">{{item.title}}</view>
            <text class="lesson_content_des ellipsis2">{{item.des}}</text>
            <view class="lesson_content_footer">
              <view class="lesson_footer_right">
                <view><text>￥</text>{{item.price}}</view>
                <text>￥{{item.o_price}}</text>
              </view>
              <view class="lesson_footer_left">{{item.read || 0}}人已看过</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="course">
      <view class="course_head" @tap="gotoUrl('course')">
        <view class="course_head_left">
          <image src="/static/image/shu.png" mode=""></image>
          精品课程
        </view>
        <view class="course_head_right">
          查看更多
          <uv-icon name="arrow-right" color="#999999" size="14"></uv-icon>
        </view>
      </view>
      <scroll-view scroll-x="true" class="course_main">
        <view class="course_main_box" v-for="(item,index) in courseList" :key="index">
          <image class="course_box_image" :src="item.image" mode=""></image>
          <view class="course_box_content">
            <text>{{item.title}}</text>
            <view class="course_box_center">
              <view class="course_footer_left">{{item.read || 0}}人已看过</view>
              <view class="course_footer_right"><text>￥</text>{{item.price}}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="new_man">
      <image :src="newMan" mode="widthFix"></image>
    </view>
    <view class="liveming">
      <view class="liveming_head">
        <view class="liveming_head_left">
          <image src="/static/image/zhibo.png" mode=""></image>
          直播
        </view>
        <view class="liveming_head_right">
          查看更多
          <uv-icon name="arrow-right" color="#999999" size="14"></uv-icon>
        </view>
      </view>
      <view class="liveming_main" v-for="(item,index) in livemingList" :key="index">
        <image :src="item.image" mode=""></image>
        <view class="liveming_main_banq" :class="item.type == 1 ? 'liveming_banq_active': ''">
          {{item.type == 1? '直播中': '已结束'}}
        </view>
        <view class="liveming_footer">
          <view class="liveming_footer_left">
            {{item.title}}
          </view>
          <view class="liveming_footer_right">
            开始时间: {{item.time}}
          </view>
        </view>
      </view>
    </view>
    <view class="guesslive">
      <view class="guesslive_head">
        <view class="guesslive_head_left">
          <image src="/static/image/xihuang.png" mode=""></image>
          猜你喜欢
        </view>
        <view class="guesslive_head_right">
          查看更多
          <uv-icon name="arrow-right" color="#999999" size="14"></uv-icon>
        </view>
      </view>
      <view class="guesslive_main">
        <view class="guesslive_main_box" v-for="(item,index) in guessliveList" :key="index">
          <view class="guesslive_main_box_left">
            <image :src="item.image" mode=""></image>
            <view>
              <image
                :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
                mode=""></image>
              <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
            </view>
          </view>
          <view class="guesslive_main_box_content">
            <view class="guesslive_content_head ellipsis">
              <view>
                {{item.title}}
              </view>
              <text class="guesslive_content_des"> {{item.des}}</text>
            </view>
            <view class="guesslive_content_footer">
              <view class="guesslive_footer_left">{{item.read || 0}}人已看过</view>
              <view class="guesslive_footer_right">
                <text>￥{{item.o_price}}</text>
                <view><text>￥</text>{{item.price}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <ys-tabbar :value="0" />
</template>

<script lang="ts" setup>
  import {
    ref,
    reactive
  } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  const newMan = ref('/static/taotaitupian/xinren.png')
  const swiperList = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper1.png'
  ])
  const navList = ref([
    { img: '/static/image/gerentisheng.png', name: '个人提升', url: '' },
    { img: '/static/image/yingping.png', name: '音频频道', url: '' },
    { img: '/static/image/jingpinkecheng.png', name: '精品课程', url: '' },
    { img: '/static/image/zhibokecheng.png', name: '直播课程', url: '' },
    { img: '/static/image/chaojihuiyuan.png', name: '超级会员', url: '' },
  ])
  const couponList = ref([{}, {}, {}, {}])
  const lessonList = ref([
    {
      image: '/static/taotaitupian/wangyesheji.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/xianshangzhaoping.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    },
  ])
  const courseList = ref([
    {
      image: '/static/taotaitupian/index_nav.png',
      title: '7天速成精品课？',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/index_nav2.png',
      title: '7天速成精品课？',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/index_nav.png',
      title: '7天速成精品课？',
      read: 560,
      o_price: 999,
      price: 666,
    },
  ])
  const livemingList = ref([
    {
      image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '7天速成精品课',
      time: '2020-09-12 12:21',
      type: 1,
    }, {
      image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
      title: '7天速成精品课',
      time: '2020-09-12 12:21',
      type: 2,
    }
  ])
  const guessliveList = ref([
    {
      image: '/static/taotaitupian/wangyesheji.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/xianshangzhaoping.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      price: 666,
    },
  ])
  const gotoUrl = (urlStr : string, params ?: string) => {
    uni.navigateTo({
      url: `/pages/${urlStr}/${urlStr}`
    })
  }
  const gotoDetail = (val : any) => {
    console.log(val)
    uni.navigateTo({
      url: `/pages/filegraphic/graphic/graphic`
    })
  }
  onLoad(() => {
    console.log(11)
  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: PingFang SC;
    background-color: #fff;
    padding-bottom: 100rpx;
  }

  .search {
    width: 690rpx;
    height: 68rpx;
    background: #F5F5F5;
    border-radius: 34rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25rpx;
    margin-top: 26rpx;
    box-sizing: border-box;
    font-size: 26rpx;

    image {
      width: 40rpx;
      height: 40rpx;
    }

    &_left {
      display: flex;
      align-items: center;
      color: #999999;

      >image {
        margin-right: 20rpx;
      }
    }
  }

  .swiper_box {
    width: 750rpx;
    height: 300rpx;
    margin-top: 25rpx;
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 30rpx 60rpx;
    width: 750rpx;
    box-sizing: border-box;

    &_content {
      display: flex;
      flex-direction: column;

      image {
        width: 114rpx;
        height: 114rpx;
      }
    }
  }

  .coupon,
  .lesson,
  .course,
  .liveming,
  .guesslive {
    width: 750rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 70rpx;

    &_head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 36rpx;

      &_left {
        align-items: center;
        display: flex;

        image {
          width: 48rpx;
          height: 48rpx;
          margin-right: 10rpx;
        }

        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
      }

      &_right {
        display: flex;
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
        align-items: center;
      }
    }

  }

  .coupon {
    margin-top: 0;

    &_main {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      white-space: nowrap;

      &_box {
        width: 308rpx;
        height: 124rpx;
        position: relative;
        display: inline-flex;
        margin-right: 20rpx;
        color: #fff;

        .coupon_box_bg {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1;
        }

        .coupon_box_content {
          width: 308rpx;
          height: 124rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: AlibabaPuHuiTiR;
          position: absolute;
          z-index: 2;

          >text {
            writing-mode: vertical-rl;
            font-size: 20rpx;
            padding: 0 15rpx;
          }

          .coupon_box_center {
            >text {
              font-size: 20rpx;
            }

            >view {
              font-size: 32rpx;

              >text {
                font-size: 24rpx;
              }
            }
          }

          image {
            width: 70rpx;
            height: 70rpx;
            padding: 0 20rpx 0 0;
          }
        }
      }
    }
  }

  .guesslive {
    &_main {
      &_box {
        border-bottom: 1px solid rgba(#000, .1);
        padding-bottom: 40rpx;
        margin-bottom: 40rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
          margin-bottom: 0;
        }

        &_left {
          position: relative;
          margin-right: 20rpx;
          border-radius: 8rpx;
          width: 240rpx;
          height: 160rpx;

          image {
            width: 240rpx;
            height: 160rpx;
            border-radius: 8rpx;
          }

          >view {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #343434;
            border-radius: 0rpx 10rpx 0rpx 10rpx;
            opacity: 0.6;
            color: #fff;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90rpx;
            height: 36rpx;

            image {
              width: 32rpx;
              height: 32rpx;
              margin-right: 2rpx;
            }
          }
        }

        &_content {
          width: 430rpx;
          height: 160rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .lesson_content_head,
          .guesslive_content_head {
            width: 100%;
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }

          .lesson_content_des,
          .guesslive_content_des {
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
            margin-top: 18rpx;
          }

          .lesson_content_footer,
          .guesslive_content_footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            .lesson_footer_left,
            .guesslive_footer_left {
              font-size: 24rpx;
              color: #999999;
            }

            .lesson_footer_right,
            .guesslive_footer_right {
              display: flex;
              align-items: flex-end;

              >text {
                font-size: 24rpx;
                color: #999999;
                text-decoration-line: line-through;
                margin-right: 13rpx;
              }

              >view {
                font-weight: bold;
                font-size: 32rpx;
                color: #FA4058;

                text {
                  font-size: 24rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .lesson {
    &_head {
      margin-bottom: 0;
    }
    &_main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      &_box {
        width: 330rpx;
        height: 388rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(17, 17, 17, 0.14);
        border-radius: 10rpx;
        margin-top: 33rpx;
        &_left {
          width: 330rpx;
          height: 188rpx;
          position: relative;

          image {
            width: 330rpx;
            height: 188rpx;
            border-radius: 10rpx 10rpx 0 0;
          }

          >view {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 90rpx;
            height: 36rpx;
            background: #343434;
            border-radius: 0rpx 10rpx 0rpx 0rpx;
            opacity: 0.6;
            color: #fff;
            font-size: 20rpx;

            image {
              width: 26rpx;
              height: 26rpx;
              margin-right: 6rpx;
            }
          }
        }

        &_content {
          width: 100%;
          height: 200rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 20rpx 10rpx 15rpx;
          box-sizing: border-box;

          .lesson_content_head {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;
          }

          .lesson_content_des {
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
          }

          .lesson_content_footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            .lesson_footer_left {
              font-size: 24rpx;
              color: #999999;
            }

            .lesson_footer_right {
              display: flex;
              align-items: flex-end;

              >text {
                font-size: 24rpx;
                color: #999999;
                text-decoration-line: line-through;
                margin-right: 13rpx;
              }

              >view {
                font-weight: bold;
                font-size: 32rpx;
                color: #FA4058;

                text {
                  font-size: 24rpx;
                }
              }
            }
          }
        }
      }
    }
  }

  .course {
    &_main {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      white-space: nowrap;

      &_box {
        width: 290rpx;
        height: 439rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(17, 17, 17, 0.14);
        border-radius: 10rpx;
        display: inline-flex;
        margin-right: 24rpx;
        font-weight: bold;
        font-size: 30rpx;
        color: #333333;
        flex-direction: column;
        margin-bottom: 15rpx;

        .course_box_image {
          width: 290rpx;
          height: 300rpx;
          background: #FFB0B0;
          border-radius: 10rpx 10rpx 0rpx 0rpx;
        }

        .course_box_content {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 12rpx;
          box-sizing: border-box;
        }

        .course_box_center {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .course_footer_left {
            font-size: 24rpx;
            color: #999999;
          }

          .course_footer_right {
            display: flex;
            align-items: flex-end;
            font-weight: bold;
            font-size: 32rpx;
            color: #FA4058;

            >text {
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }

  .new_man {
    width: 690rpx;
    margin-top: 30rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .liveming {
    &_main {
      display: flex;
      flex-wrap: nowrap;
      width: 100%;
      white-space: nowrap;
      position: relative;
      margin-bottom: 30rpx;

      image {
        width: 100%;
        height: 340rpx;
        background: #999999;
        border-radius: 10rpx;
      }

      &_banq {
        width: 100rpx;
        height: 40rpx;
        border-radius: 0rpx 10rpx 0rpx 10rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 0;
        top: 0;
        background-color: #666666;
      }
    }

    .liveming_banq_active {
      background: #FA4058;
    }

    &_footer {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 690rpx;
      height: 83rpx;
      background: linear-gradient(0deg, #262626 0%, rgba(38, 38, 38, 0.03) 97%);
      border-radius: 10rpx;
      opacity: 0.8;
      color: #fff;
      padding: 0 20rpx;
      box-sizing: border-box;
    }
  }
</style>